import { Badge, Col, Drawer, Empty, Row, Spin, Timeline, message } from 'antd';
import React, { useEffect, useState } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { ContractManageAPI } from '../common/type';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { handleUrgeDataGridService } from '../services';
import MyIcon from '@/components/MyIcon';

export const ContractUrfeListDrawer: React.FC<ContractManageAPI.IContractUrfeListDrawer> = ({ openDrawer, checkRowObj, onClose }) => {
  /** 样式根目录 */
  const styleFixCls = 'contract-styfixcls-';

  /** 保存督办记录 */
  const [urgeDataList, setUrgeDataList] = useState<Record<string, any>[]>([]);

  /** 接口回调 */
  const callback = (res) => {
    if (res && res?.msgFlag) {
      setUrgeDataList(res?.rows);
    } else {
      message.error(res?.msg);
    }
  };

  /** 引入查询督办记录接口 */
  const { handleUrgeDataGridLoading, handleUrgeDataGridRun } = handleUrgeDataGridService(callback);

  /**初始化 */
  useEffect(() => {
    if (openDrawer) {
      handleUrgeDataGridRun({
        contractID: checkRowObj?.id,
        handlerID: checkRowObj?.handlerID,
      });
    }
  }, [openDrawer]);

  /** 处理督办时间 */
  const handTimeDom = (time: string) => {
    const [dayTime, secondTime] = time?.split(' ');
    return (
      <div
        style={{
          width: '100%',
          textAlign: 'right',
        }}
      >
        <div>{dayTime}</div>
        <div>{secondTime}</div>
      </div>
    );
  };

  // owner 是办理人
  return (
    <Drawer
      title="提醒记录"
      className={pageStyles['detailDrawerDes']}
      style={{
        position: 'absolute',
        height: '100%',
        overflow: 'hidden',
      }}
      onClose={() => {
        setUrgeDataList([]);
        onClose();
      }}
      open={openDrawer}
      placement="right"
      getContainer={false}
      width={document.body?.clientWidth * 0.45}
      bodyStyle={{ padding: '5px 0px', overflow: 'hidden' }}
      closable={false}
      destroyOnClose={true}
    >
      <Spin spinning={handleUrgeDataGridLoading}>
        {urgeDataList?.length > 0 ? (
          <ScrollBarLayout style={{ padding: '5px 10px' }}>
            <div className={styleFixCls + 'urgeBoxDiv'}>
              <Timeline>
                {urgeDataList?.map((item: any, index: number) => {
                  return (
                    <Timeline.Item
                      key={`${item?.id}-${index}`}
                      color={item?.readFlag == 0 ? 'red' : ''}
                      dot={item?.readFlag == 1 ? <MyIcon style={{ fontSize: 18 }} type="icon-time-circle" /> : null}
                      label={handTimeDom(item?.handleTime)}
                    >
                      <Badge.Ribbon text={item?.readFlag ? '已读' : '未读'} color={item?.readFlag ? '' : 'red'}>
                        <div className={`${styleFixCls}urgeBoxDiv-timeContent`}>
                          <div style={{ textIndent: '2em' }}>{item?.handleInfo || '--'}</div>
                          <Row gutter={[12, 8]}>
                            <Col span={24} style={{ textAlign: 'right' }}>
                              <span style={{ color: '#727272' }}>经办人</span>：{item?.ownerName || '--'}
                            </Col>
                          </Row>
                        </div>
                      </Badge.Ribbon>
                    </Timeline.Item>
                  );
                })}
              </Timeline>
            </div>
          </ScrollBarLayout>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
        )}
      </Spin>
    </Drawer>
  );
};
